<template>
  <div id="player"></div>
</template>

<script setup>
import { onMounted } from 'vue'

let api = null

onMounted(() => {
  //初始化API实例并启动渲染，DigitalTwinPlayer对象的构造参数请参考API开发文档
  api = new window.acapi.DigitalTwinPlayer(window.HostConfig.Player, {
    domId: 'player', //HTML元素ID（它将作为要创建的Video标签的父元素），如果未设置此参数，则不传输视频流，只进行API调用
    iid: '2486486175360', //云渲染实例的ID
    // pid: pid,                       //指定实例要加载的工程ID
    // reset: urlParams.get('reset'), //指定是否重置实例。如果设置reset为true，每次连接（包括刷新）都会得到一个全新的实例
    apiOptions: {}, //用于指定DigitalTwinAPI的初始化选项
    keyEventTarget: 'none', //默认值为'video'，设置键盘交互事件，可选的值：'document'、'video' 、'none'
    useBuiltinCursors: true, //默认值为true，是否使用内置光标。
    // password: urlParams.get('password'),  //设置实例的访问密码，如果服务设置了密码，那么客户端需要提供正确的密码才能连接实例
    urlExtraInfo: {
      //可以在WebSocket URL后面附加其他信息（例如认证信息等）（如果不需要，直接去掉此属性即可）
      //_ip: '192.168.1.4',
      //_token: 'AAABBBCCC'
    }
  }).getAPI()
})
</script>

<style lang="scss" scoped>
#player {
  //position: fixed;
  width: 100%;
  height: 100%;
}
</style>
